<template>
  <div class="register">
    <div class="register-title">注册</div>
    <div class="register-border">
      <input type="text" v-model="phone" placeholder="请输入手机号" />
    </div>
    <div class="register-border">
      <input type="text" v-model="sms" placeholder="请输入验证码" />
      <span @click="getSms">{{ smsText }}</span>
    </div>
    <div class="register-border">
      <input
        :type="isPwdType ? 'password' : 'text'"
        v-model="pwd"
        placeholder="请输入字母、数字组合的密码"
      />
      <img
        :src="isPwdType ? closeEyes : openEyes"
        width="17"
        height="17"
        @click="pwdTypeClick"
      />
    </div>
    <div class="register-border">
      <input
        :type="isinputType ? 'password' : 'text'"
        v-model="pwd1"
        placeholder="请再次输入您的密码"
      />
      <img
        :src="isinputType ? closeEyes : openEyes"
        width="17"
        height="17"
        @click="imgClick"
      />
    </div>
    <div class="register-border">
      <input
        type="text"
        v-model="referencesPhone"
        placeholder="请输入邀请人手机号（必填）"
      />
    </div>
    <div class="loginbtn" @click="nextClick">注册</div>
    <div class="login" @click="loginClick">登录</div>
    <div class="register-bottom">
      <img
        :src="isRead ? isReadyes : isReadno"
        width="13"
        height="13"
        alt=""
        @click="isReadClick"
      />
      我已阅读并同意
      <span>《XX用户使用协议》</span>
    </div>
  </div>
</template>
<script>
import { getApiSms, getApiRegister } from "network/ApiServe";
export default {
  name: "Register",
  data() {
    return {
      isPwdType: true,
      isinputType: true,
      isRead: false,
      closeEyes: require("assets/image/icon_close_your_eyes.png"),
      openEyes: require("assets/image/icon_open_your_eyes.png"),
      isReadyes: require("assets/image/icon_remember_pwd_yes.png"),
      isReadno: require("assets/image/icon_remember_pwd_no.png"),

      smsText: "获取验证码",
      phone: "",
      sms: "",
      pwd: "",
      pwd1: "",
      referencesPhone: "",
    };
  },
  methods: {
    nextClick() {
      if (this.phone.length != 11) {
        return this.$toast("手机号码不能为空或者手机格式不正确");
      }
      if (this.sms.length == 0) {
        return this.$toast("验证码不能为空");
      }
      if (this.pwd.length < 6) {
        return this.$toast("密码长度不能少于6位");
      }
      if (this.pwd1.length < 6) {
        return this.$toast("再次输入密码,长度不能少于6位");
      }
      if (this.referencesPhone.length == 0) {
        return this.$toast("请输入邀请人手机号");
      }
      if (this.pwd.trim() != this.pwd1.trim()) {
        return this.$toast("两次输入密码不一致");
      }
      if (!this.isRead) {
        return this.$toast("请先阅读用户协议");
      }

      getApiRegister(
        this.phone.trim(),
        this.sms.trim(),
        this.pwd1.trim(),
        this.referencesPhone.trim()
      )
        .then((res) => {
          console.log(res);
          this.$toast(res.resp_message);
          if (res.resq_code === "000000") {
            this.$router.back(-1);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    loginClick() {
      this.$router.back(-1);
    },
    pwdTypeClick() {
      this.isPwdType = !this.isPwdType;
    },
    imgClick() {
      this.isinputType = !this.isinputType;
    },
    isReadClick() {
      this.isRead = !this.isRead;
    },
    getSms() {
      console.log(this.phone, "phone");
      if (this.phone.length != 11) {
        return this.$toast("手机号码不正确");
      }
      let timeSS = 61;
      let timer = setInterval(() => {
        timeSS--;
        if (timeSS == 0) {
          clearInterval(timer);
          this.smsText = "获取验证码";
          return;
        }
        this.smsText = timeSS + "s";
      }, 1000);

      getApiSms(this.phone.trim())
        .then((res) => {
          this.$toast(res.resp_message);
        })
        .catch((err) => {
          console.log(err, "getApiSms");
        });
    },
  },
};
</script>
<style scoped>
.register {
  margin-left: 38px;
  margin-right: 38px;
}
.register-title {
  margin-top: 51px;
  font-size: 24px;
  color: var(--app-color-4);
  font-weight: 500;
  text-align: center;
  padding-bottom: 17px;
}
.register-border {
  margin-top: 20px;
  height: 44px;
  padding-left: 15px;
  padding-right: 15px;
  border: 1px solid var(--app-color-ef);
  border-radius: 24px;

  display: flex;
  align-items: center;
}
.register-border input {
  outline: none;
  border: 0px;
  font-size: 14px;
  align-content: center;
  vertical-align: middle;
  color: var(--app-color-4);
  flex: 1;
  background-color: #f7f7f7;
}
.register-border span {
  font-size: 12px;
  color: var(--app-primary-theme-color);
}
.loginbtn {
  margin-top: 47px;
  height: 44px;
  line-height: 44px;
  border-radius: 24px;
  font-size: 18px;
  background-color: var(--app-primary-theme-lighter-color);
  color: var(--app-color-f);
  text-align: center;
}
.login {
  margin-top: 15px;
  text-align: center;
  font-size: 13px;
  color: var(--app-color-6);
}
.register-bottom {
  margin-top: 65px;
  color: var(--app-color-4);
  font-size: 13px;
  display: flex;
  justify-content: center;
}
.register-bottom img {
  margin-right: 5px;
}
.register-bottom span {
  color: var(--app-primary-theme-color);
}
</style>